<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 属性选择器
    1.E[att] 选择具有att属性的E元素 
    2.E[att='val'] 选择具有att属性且属性值等于val的E元素
    3.E[att^="val"] 匹配具有att属性,并且以val开头的E元素
    4.E[att$="val"] 匹配具有att属性,并且以val结尾的E元素
    5.E[att*="val"] 匹配具有att属性,并且含有val的E元素*/

    input[name] {
        border: solid;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <!-- 属性选择器 
        1.属性选择器用来选择包含指定属性的标签 -->

    <p>
        <input type="radio" name="sex" class="icon-dan">男性
        <input type="radio" name="sex" class="icon-dan">女性
    </p>


    <p>
        <input type="checkbox" class="icon-duo">男性
        <input type="checkbox" class="icon-duo">女性
    </p>



    <p>
        <input type="button" value="按钮">
        <input type="submit" value="提交按钮">
    </p>
</body>

</html>